<template>
    <div class="app-container">

        <div class="card-wrap padding20 flex">

            <div v-for="(item, index) in tabs" :key="index"
                 @click="tabClick(index)"
                 :class="item.check?'tab-active':'tab-normal'">
                {{ item.name }}({{ item.count|filterNull }})
            </div>

        </div>

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

<!--            <el-col :span="6">-->
<!--                <el-form-item label="车牌号/车架号:" prop="carNoVinNo">-->
<!--                    <el-input maxlength="50" v-model="queryParams.carNoVinNo" clearable placeholder="请输入车牌号/车架号"></el-input>-->
<!--                </el-form-item>-->
<!--            </el-col>-->

            <el-col :span="6">
                <el-form-item label="客户名称:" prop="customerName">
                    <el-input maxlength="50" v-model="queryParams.customerName" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="是否有违章:" prop="violationFlag">
                    <el-select filterable v-model="queryParams.violationFlag" clearable>
                        <template v-for="dict in dict.type.violation_flag">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="产品类型:" prop="contractType">
                    <el-select filterable v-model="queryParams.contractType" clearable>
                        <template v-for="dict in dict.type.quota_rent_type">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

<!--            <el-col :span="6">-->
<!--                <el-form-item label="在租状态:" prop="inRentalStatus">-->
<!--                    <el-select filterable v-model="queryParams.inRentalStatus" clearable>-->
<!--                        <template v-for="dict in dict.type.in_rental_status">-->
<!--                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>-->
<!--                        </template>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--            </el-col>-->

        </SearchContent>

        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleExport"
                           v-hasPermi="['illegalManage:illegalSummary:export']">违章汇总导出
                </el-button>
            </div>

            <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button v-hasPermi="['illegalManage:illegalSummary:view']" size="mini" type="text" @click="handleDetail(scope.row)">
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">

                    <el-table-column min-width="180" label="客户名称(全称)" align="center" prop="customerName">
                        <template v-slot="{row}">
                            {{ row.customerName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column label="产品类型" min-width="115" align="center" prop="contractType">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.quota_rent_type"
                                :value="scope.row.contractType"
                            />
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="大区" min-width="115" align="center" prop="region">-->
<!--                        <template v-slot="{row}">-->
<!--                            {{ row.region|filterNull }}-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column label="车辆归属" min-width="115" align="center" prop="customerProperty">-->
<!--                        <template v-slot="{row}">-->
<!--                            {{ row.ascription|filterNull }}-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="在租台数" min-width="115" align="center" prop="customerLevelCode">
                        <template v-slot="{row}">
                            {{ row.rentedUnitNum|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否有违章" min-width="115" align="center" prop="violationFlag">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.violation_flag"
                                :value="scope.row.violationFlag"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="违章台数" min-width="115" align="center" prop="customerLabel">
                        <template v-slot="{row}">
                            {{ row.violationNum|filterNull }}
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="在租状态" min-width="115" align="center" prop="rentedUnitStatus">-->
<!--                        <template slot-scope="scope">-->
<!--                            <dict-tag-->
<!--                                :options="dict.type.in_rental_status"-->
<!--                                :value="scope.row.rentedUnitStatus"-->
<!--                            />-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="未处理违章数" min-width="115" align="center" prop="customerPhone">
                        <template v-slot="{row}">
                            {{ row.unHandleViolationCount|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column label="违章总分数" min-width="115" align="center" prop="createBy">
                        <template v-slot="{row}">
                            {{ row.violationTotalScore|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column label="违章金额" min-width="115" align="center" prop="createTime">
                        <template v-slot="{row}">
                            {{ row.violationTotalPrice|filterNull }}
                        </template>
                    </el-table-column>
                </template>
            </table-page>

        </div>

    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {customerDelete, customerStatistics, getCustomerList, quotaSharing} from "@/api/memberManage/memberList";
import LinkageSelect from "@/views/components/linkageSelect.vue";
import CitySelect from "@/views/components/citySelect.vue";
import ShortcutDate from "@/views/cwgd/components/ShortcutDate/index.vue";
import {carViolationSummary, carViolationSummarystatistics} from "@/api/illegalManage/illegalList";

export default {
    name:"IllegalSummaryList",
    components: {
        ShortcutDate,
        CitySelect,
        LinkageSelect,
        SearchContent
    },
    dicts: ['violation_flag', 'quota_rent_type', 'in_rental_status'],
    data() {
        return {
            //按钮loading
            buttonLoading: false,
            // 遮罩层
            loading: true,
            isNew: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                carNoVinNo: null,
                customerName: null,
                violationFlag: null,
                contractType: null,
                inRentalStatus: null,
            },
            total: 0,
            dataList: [],
            tabs: [{
                name: '在租台数',
                count: 0,
                check: false
            }, {
                name: '违章台数',
                count: 0,
                check: false
            }, {
                name: '未处理违章数',
                count: 0,
                check: false
            }, {
                name: '违章总分数',
                count: 0,
                check: false
            }, {
                name: '违章总金额',
                count: 0,
                check: false
            }]
        };
    },
    created() {
        this.getList()
    },
    activated() {
        this.getList()
    },
    methods: {
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;
            carViolationSummary(this.queryParams).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.dataList = rows
                    this.total = total
                    this.loading = false;
                }
            });

            carViolationSummarystatistics().then(res => {
                this.tabs[0].count = res.data.rentedUnitNum
                this.tabs[1].count = res.data.violationTotalCount
                this.tabs[2].count = res.data.unHandleViolationCount
                this.tabs[3].count = res.data.violationTotalScore
                this.tabs[4].count = res.data.penaltyTotalPrice
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                carNoVinNo: null,
                customerName: null,
                violationFlag: null,
                contractType: null,
                inRentalStatus: null,
            },
                this.tabClick(0)
            // this.resetForm("queryForm");
            this.handleQuery();
        },

        tabClick(index) {
            // this.tabs.forEach((item, i) => {
            //     item.check = index == i;
            // })
            // this.queryParams.businessScopeCode = `${index + 1}`
            // this.handleQuery()
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/carViolationSummary/exportList', {
                ...this.queryParams
            }, `违章汇总列表.xlsx`)
        },
        handleDetail(row) {
          this._toPage({
                name: 'IllegalSummaryDetail',
                query: {orderId: row.orderId}
            })
        },
    }
};
</script>


<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}

.form-dialog {
    ::v-deep .el-dialog__body .el-form {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
}

.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #DCDFE6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: '';
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }

}
</style>
